<template>
  <div>
    <div class="card-full">
      <div class="it w-[33%]">
        <UploadImage v-model="avatar" @upload-success="handleUpload" tip="单文件上传"></UploadImage>
      </div>
      <div class="it w-[33%]">
        <UploadImage v-model="avatar2" @upload-success="handleUpload" tip="自定义上传框">
          <template #trigger>
            <div class="avatar-wrapper">
              <el-avatar :size="128" :src="avatar2 || AVATAR_DEFAULT" />
              <div class="avatar-overlay">
                <span>修改头像</span>
              </div>
            </div>
          </template>
        </UploadImage>
      </div>
      <div class="it w-[33%]">
        <UploadImage v-model="AVATAR_DEFAULT" tip="禁止上传" :disabled="true"></UploadImage>
      </div>
    </div>
    <div class="card-full mt-4">
      <div class="it w-[25%]">
        <UploadFileAdvanced tip="多文件上传"></UploadFileAdvanced>
      </div>
      <div class="it w-[25%]">
        <UploadFileAdvanced :drag="true" tip="可拖拽上传"></UploadFileAdvanced>
      </div>
      <div class="it w-[25%]">
        <UploadFileAdvanced :disabled="true" tip="自定义上传框">
          <template #trigger>
            <el-button>上传</el-button>
          </template>
        </UploadFileAdvanced>
      </div>
      <div class="it w-[25%]">
        <UploadFileAdvanced :disabled="true" tip="禁止上传"></UploadFileAdvanced>
      </div>
    </div>
    <div class="card-full mt-4 !items-start">
      <div class="it w-[33%]">
        <UploadFileAdvanced :limit="1" tip="列表展示"></UploadFileAdvanced>
      </div>
      <div class="it w-[33%]">
        <UploadFileAdvanced :limit="1" :listType="'picture'" tip="图片列表展示"></UploadFileAdvanced>
      </div>
      <div class="it w-[33%]">
        <UploadFileAdvanced :limit="1" :listType="'picture-card'" tip="缩略图展示"></UploadFileAdvanced>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { AVATAR_DEFAULT } from "@/config";

// 更换头像
const avatar = ref("");
const avatar2 = ref("");
const handleUpload = (url: string) => {
  avatar.value = url;
};

onMounted(() => {});
</script>
<style lang="scss" scoped>
.card-full {
  display: flex;
  flex-flow: row wrap;
}
.it {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.avatar-wrapper {
  position: relative;
  display: inline-block;
  cursor: pointer;
}
.avatar-overlay {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 128px;
  height: 128px;
  font-size: 12px;
  color: white;
  background-color: rgb(0 0 0 / 50%);
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.avatar-wrapper:hover .avatar-overlay {
  opacity: 1;
}
</style>
